<template>
    <div>
        <el-form :inline="true" :model="form">
            <el-form-item label="日志内容">
                <el-input size="mini" placeholder="" v-model="form.query" />
            </el-form-item>
            <el-form-item label="操作账号">
                <el-input size="mini" placeholder="" v-model="form.name" />
            </el-form-item>
            <el-form-item label="操作端">
                <el-input size="mini" placeholder="" v-model="form.agencyName" />
            </el-form-item>
            <el-form-item label="操作日期">
                <el-date-picker
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    v-model="tkCreatedAt"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" @click="handleFilter">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="dataTable" :height="tableHeight" :data="list"
                style="width: 100%">
            <el-table-column align="left" label="日志内容" width="250">
                <template slot-scope="scope">
                    <span>{{scope.row.logName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作时间" width="150">
                <template slot-scope="scope">
                    <span>{{scope.row.createdAt}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="操作账号" width="150">
                <template slot-scope="scope">
                    <span>{{scope.row.userName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="操作端" width="150">
                <template slot-scope="scope">
                    <span>{{scope.row.agencyName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="IP" width="130">
                <template slot-scope="scope">
                    <span>{{scope.row.ip}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="请求地址" width="300">
                <template slot-scope="scope">
                    <span>{{scope.row.url}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="请求参数" width="150">
                <template slot-scope="scope">
                    <span>{{scope.row.message}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="POST内容" width="150">
                <template slot-scope="scope">
                    <span><el-button size="mini" type="primary" @click="handlePost(scope.row)">查看</el-button></span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="form.pageNum" :page-sizes="[20,30, 50]" :page-size="form.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>

        <el-dialog title="查看post内容" :visible.sync="dialogPostVisible" :close-on-click-modal="false" width="700px">
            <el-form :rules="rules" :model="orderForm" ref="orderForm" label-width="120px">
                <el-form-item label="">
                    <el-input size="mini" type="textarea" v-model="postContent" :rows="10"></el-input>
                    
                </el-form-item>
            </el-form>
            
            
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogPostVisible=false" type="primary">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {
        log_list
    } from '../../api/sys';

    export default {
        name: 'order-list',
        components: {
        },
        props: {
            formData: Object
        },
        computed: {
        },
        watch: {
            formData: {
                immediate: true,
                handler (val) {
                    this.form.orderStatus = val.order_status;

                    this.getList();
                }
            }
        },
        data() {
            return {
                postContent: undefined,
                dialogPostVisible: false,
                tkCreatedAt: undefined,
                tableHeight: 200,
                form: {
                    pageNum: 1,
                    pageSize: 20,
                    query: undefined,
                    name: undefined,
                    agencyName: undefined,
                    startDate: undefined,
                    endDate: undefined,
                },
                list: [],
                total: 0,
            }
        },
        created() {
            this._getTableHeight();
        },
        mounted() {
            const that = this

            window.onresize = () => {

                return (() => {

                    that._getTableHeight()

                })()
            }
        },
        methods: {
            handlePost(row) {
                this.postContent = row.requestBody;
                this.dialogPostVisible = true;
            },
            _getTableHeight() {
                this.tableHeight = window.innerHeight - 280
            },
            tblSort(d) {
                this.form.orderCol = d.prop;
                this.form.orderAsc = d.order;

                this.handleFilter();
            },
            handleFilter() {
                this.form.pageNum = 1;
                this.getList();
            },
            handleSizeChange(val) {
                this.form.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.form.pageNum = val;
                this.getList();
            },
            getList() {
                if(this.tkCreatedAt) {
                    this.form.startDate = this.tkCreatedAt[0];
                    this.form.endDate = this.tkCreatedAt[1];
                } else {
                    this.form.startDate = undefined;
                    this.form.endDate = undefined;
                }
                log_list(this.form).then(response => {
                    this.list = response.data.list;
                    this.total = response.data.total;
                })
            },
            getStatusColor(row) {
                if(row.profitStatus == 5) {
                    return "success"
                }

                return "danger"
            },
            handleDetail(row) {
                let {href} = this.$router.resolve({path: '/order_detail?id=' + row.id});
                window.open(href, '_blank');

            },
            handleSend(row) {
                
            }

        }
    }
</script>
<style lang="scss" scoped>
    .cell {
        line-height: 1.5;
        padding: 0 2px;

        .order-img-box {
            margin-left: 10px;
            margin-bottom:10px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            text-align: left;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;

            .order-no {
                margin-bottom: 10px;
                font-size:14px;
            }

            .title-img {
                position: relative;
                border-radius: 4px;
                overflow-y: hidden;

                .img-text-box {
                    margin-left: 10px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;

                    .img {
                        width: 100px;
                        height: 100px;
                        border-radius: 4px;
                        margin-right: 10px;
                    }

                    .img-text {
                        width: 240px;
                        height: 36px;
                        line-height: 18px;
                        margin-bottom: 10px;
                    }

                    .btn-text {
                        width: auto;
                        height: 18px;
                        background: rgba(51,51,51,.1);
                        font-size: 12px;
                        padding: 2px 4px;
                    }
                }
            }
        }
    }
</style>